<template>
  <div class="item van-hairline--bottom">
    <GoodsCard
      class="goods-card"
      :id="detail.goods_id"
      :price="goodsPrice"
      :title="detail.goods_name"
      :thumb="detail.img_list[0] | BASESRC"
    >
      <div slot="tags" v-if="goodsSku.none_sku">库存：{{countStock}}</div>
      <div slot="bottom" class="goods-bottom">
        <div class="price">
          <div class="card__price">{{priceText}} {{goodsPrice | yuan}}</div>
        </div>
        <div class="btn-add e-handle" @click="showSku = true">
          <van-icon name="add" />
        </div>
      </div>
    </GoodsCard>
    <van-sku
      v-model="showSku"
      :sku="goodsSku"
      :goods="goodsInfo"
      :goods-id="detail.goods_id"
      close-on-click-overlay
      :show-add-cart-btn="false"
      reset-selected-sku-on-hide
      reset-stepper-on-hide
      @buy-clicked="onConfirm"
      ref="getSkuData"
      class="goods-action-group"
    >
      <div slot="sku-header-price" slot-scope="props">
        <div class="van-sku__goods-price">
          <div>{{priceText}} {{goodsPrice | yuan}}</div>
        </div>
      </div>
      <div slot="sku-actions" slot-scope="props">
        <div class="van-sku-actions">
          <van-button
            class="action-btn"
            type="primary"
            bottom-action
            @click="props.skuEventBus.$emit('sku:buy')"
            v-if="countStock>0"
          >确定</van-button>
          <van-button bottom-action disabled v-else>商品已售罄</van-button>
        </div>
      </div>
    </van-sku>
  </div>
</template>
<script>
import GoodsCard from "@/components/GoodsCard";
import { isEmpty } from "@/utils/util";
import { Sku } from "vant";
export default {
  data() {
    return {
      showSku: false,
      goodsSku: {},
      goodsInfo: {}
    };
  },
  props: {
    detail: {
      type: Object
    }
  },
  computed: {
    priceText() {
      return this.$route.params.type == "purchase" ? "采购价：" : "商城售价：";
    },
    goodsPrice() {
      return this.detail.min_price
        ? parseFloat(this.detail.min_price).toFixed(2)
        : "0.00";
    },
    // 转换商品规格价格 ( 元 => 分 )
    tranList() {
      const list = this.detail.sku.list ? this.detail.sku.list : [];
      list.forEach(e => {
        e.price = parseFloat(e.price) * 100;
      });
      return list;
    },
    // 计算总库存
    countStock() {
      const list = this.detail.sku.list ? this.detail.sku.list : [];
      let stock = 0;
      if (list && !isEmpty(list)) {
        list.forEach(e => {
          stock += parseFloat(e.stock_num);
        });
      }
      return stock;
    }
  },
  mounted() {
    const $this = this;
    const goods = $this.detail;
    if (!goods.sku.tree) goods.sku.tree = [];
    $this.goodsSku = {
      tree: goods.sku.tree,
      list: $this.tranList,
      price: parseFloat(goods.min_price).toFixed(2),
      stock_num: $this.countStock, // 商品总库存
      collection_id: isEmpty(goods.sku.tree) ? $this.tranList[0].id : 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
      none_sku: isEmpty(goods.sku.tree) // 是否无规格商品
    };
    $this.goodsInfo = {
      title: goods.goods_name,
      picture: $this.$BASESRC(goods.img_list[0])
    };
  },
  methods: {
    onConfirm(data) {
      const $this = this;
      const params = {};
      params.sku_id = data.selectedSkuComb.id;
      params.num = data.selectedNum;
      params.channel_goods_type = $this.detail.channel_info;
      params.buy_type = $this.$route.params.type;
      // console.log(params);
      $this.$store.dispatch("addChannelCart", params).then(res => {
        $this.$Toast.success("添加成功");
        $this.showSku = false;
        setTimeout(() => {
          $this.$store.dispatch("getChannelCartList", {
            page_index: 1,
            page_size: 20,
            buy_type: $this.$route.params.type
          });
        }, 500);
      });
    }
  },
  components: {
    GoodsCard,
    [Sku.name]: Sku
  }
};
</script>
<style scoped>
.goods-action-group {
  z-index: 1000;
}

.item .goods-card {
  background: #ffffff;
  padding: 5px;
}

.goods-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-add {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #1989fa;
  padding: 4px;
  border-radius: 50%;
  overflow: hidden;
}
</style>
